<template>
  <view class="my">
    <!-- 头部导航 -->
    <view class="w-750 w-bj-cont" style="position: fixed; top: 0; left: 0;">
      <view class="h-100 w-row-justify-between-align">
        <view class="wh-80 w-row-center"></view>
        <view class="w-250 h-100 w-row-center w-wz-conts font-36">我的</view>
        <view class="wh-80 w-row-center"></view>
      </view>
    </view>
    <view class="bwh-100"></view>
    <!-- 头部导航结束 -->
    <view class="bwh-20"></view>
    <!-- 内容区域 -->

    <view class="cent-box">
      <view class="padding-sm">
        <view class="head-padding">
          <view class="head-box disflex">
            <image v-if="userInfo.headimgurl" :src="userInfo.headimgurl"
                   class="radius-sm avatar fl margin-right-xs" @click="choose_image()">
            </image>
            <image v-else src="@/static/gane/user.png" class="radius-sm avatar fl margin-right-xs"
                   @click="choose_image()">
            </image>

            <view class="cent">
              <view class="title">
                {{userInfo.nickname || '游客'}}
                <image class="wh-30 head-icon margin-left-xs" src="@/static/mine/edit.png"
                       @click="edit_nickname()"></image>
              </view>
              <view class="label">
                <!-- <span class="margin-right-xxs small vip-tag" :class="'v'+userInfo.vip"></span> -->
                <!-- 加入平台第8天 -->
              </view>


            </view>
            <!-- <image class="wh-40 head-icon" src="@/static/gane/goBack-icon.png"></image> -->
          </view>

          <view class="bg-blue text-color-white padding-xs margin-top-sm price-box disflex">
            <view class="van-space van-space--horizontal van-space--align-center disflex flex1">
              <view class="van-space-item">
                <image class="icon" src="@/static/gane/qianbao-icon.png"></image>

              </view>
              <view class="van-space-item">
                钱包余额
              </view>


            </view>

            <view class="fr">
              ￥{{userInfo.money || 0.00}}
            </view>
          </view>


        </view>

        <view class="rel full-width mine-tool cover">
          <view class="van-grid van-hairline--top">
            <!-- '/pages/my/yuEBao/index' -->
            <view class="van-grid-item" style="flex-basis: 50%;" @click="toTips(1)">
              <view class="van-grid-item__content van-grid-item__content--center van-hairline">
                <view class="van-space van-space--horizontal van-space--align-center">
                  <view class="van-space-item">
                    <image class="icon" src="@/static/gane/mine-iocn1.png" mode="widthFix"></image>
                  </view>
                  <view class="van-space-item">
                    <view class="margin-left-xs">
                      <view class="text-sml">
                        余额宝
                      </view>
                      <view class="text-xs text-color-yellow">
                        昨日收益 ¥{{banlanceBaoInfo.y_income}}
                      </view>
                    </view>
                  </view>
                </view>
              </view>
            </view>
            <!-- '/pages/my/welfareCenter/index' -->
            <view class="van-grid-item" style="flex-basis: 50%;" @click="toTips(2)">
              <view class="van-grid-item__content van-grid-item__content--center van-hairline">
                <view class="van-space van-space--horizontal van-space--align-center">
                  <view class="van-space-item">
                    <image class="icon" src="@/static/gane/mine-iocn2.png" mode="widthFix"></image>
                  </view>
                  <view class="van-space-item">
                    <view class="margin-left-xs">
                      <view class="text-sml">
                        福利中心
                      </view>
                      <view class="text-xs text-color-yellow">
                        免费领取福利
                      </view>
                    </view>
                  </view>
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>

      <view class="rel cover-tw mine-cell padding-sm padding-top-lg">
        <view class="">
          <view class="van-grid">
            <view class="van-grid-item van-grid-item--square" style="flex-basis: 33%; padding-top: 25%;"
                  v-for="(item,index) in itemList" :key="index" @click="toList(index)">
              <view
                  class="van-grid-item__content van-grid-item__content--center van-grid-item__content--square">
                <view class="van-badge__wrapper">
                  <view class="round item-icon">
                    <view class="round item-icon-child">
                      <image class="icon" :src="item.icon" mode="widthFix">
                      </image>
                    </view>
                  </view>
                </view>

                <view class="text-sm margin-top-xs">
                  {{item.title}}
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>

      <view class="radius-lg bg-white padding-sm" style="display: none;">
        <view class="vip-progress-bar">
          <span class="vip-tag noy " :class="'v'+userInfo.vip"></span>
          <view class="vip-progress-box">
            <view class="vip-progress-line">
              <view class="vip-progress-rate" :style="'width: '+(userInfo.next_vip_ls_bfb)+'%;'"></view>
              <view class="vip-progress-rate1" :style="'top:7px;width: '+(userInfo.next_vip_cz_bfb)+'%;'">
              </view>
            </view>
          </view>
          <span class="vip-tag noy" :class="'v'+(userInfo.vip+1)"></span>
        </view>

        <view class="margin-top-xs text-xs">
          <!--					已完成{{userInfo.liushui}}.00流水, -->升级还需
          <span class="" style="color:#409eff">{{userInfo.next_vip_ls>0 ? userInfo.next_vip_ls :0.00}}流水</span>
          或 <span class="text-color-yellow">充值{{userInfo.next_vip_cz >0 ? userInfo.next_vip_cz :0.00}}元</span>
          <!-- '/pages/my/yuEBao/memberList' -->
          <span class="fr qy" >
						更多VIP权益
						<image src="@/static/gane/goBack-icon.png" mode="widthFix" class="icon">
						</image>
					</span>
        </view>

        <view class="vip-welfare margin-top-sm">
          <view class="item" v-for="(item,index) in welfareList" :key="index" :class="{active: item.active}">
            {{item.title}}
          </view>
        </view>
      </view>

      <view class="padding-sm">
        <view class="van-cell-group van-hairline--top-bottom radius-lg bg-white mine-item">
          <view class="van-cell bg-none" v-for="(item,index) in groupList" :key="index"
                @click="selGroup(item)">
            <image class="icon" :src="item.img" mode="widthFix"></image>
            <view class="van-cell__title">
              {{item.title}}
            </view>
            <view class="van-cell__value">
              {{item.label}}
            </view>
          </view>
        </view>
      </view>
    </view>

    <uni-popup style="z-index: 999;" ref="phone_popup" type="bottom">
      <view class="w-600 h-350 w-bj-white w-bor-25 w-col-center">
        <view class="wh-30"></view>
        <view class="h-80 font-36b">修改昵称</view>
        <view class="wh-30"></view>
        <view class="w-450 h-100">
          <input type="text" class="phone_input" v-model="nickname" />
        </view>
        <view class="wh-30"></view>
        <view class="w-450 h-80">
          <button :disabled="!nickname"
                  class="van-button van-button--primary van-button--normal van-button--block"
                  :class="{ 'van-button--disabled': !nickname }" @click="edit_nickname_submit()">
            <view class="van-button__content">
              <span class="van-button__text">确定</span>
            </view>
          </button>
        </view>
        <view class="wh-40"></view>
      </view>
    </uni-popup>

    <uni-popup style="z-index: 999;" ref="save_popup" type="bottom">
      <view class=" w-bj-white saveBox">
        <view class="van-share-sheet__header">
          <h2 class="van-share-sheet__title">立即分享给好友</h2>
        </view>
        <view class="van-share-sheet__options">
          <view class="save-items" @click="selSaveItem('link')">
            <image src="../../static/mine/link-icon.png" mode="widthFix"></image>
            <view class="">
              复制链接
            </view>
          </view>
          <view class="save-items" @click="selSaveItem('qrcode')">
            <image src="../../static/mine/qrcode-icon.png" mode="widthFix"></image>
            <view class="">
              二维码
            </view>
          </view>
        </view>

        <button type="button" class="van-share-sheet__cancel" @click="closeSave()">取消</button>
      </view>
    </uni-popup>

    <uni-popup style="z-index: 999;" ref="qrcode_popup" type="center">
      <view class=" w-bj-white w-600  w-col-center w-bor-25">
        <image :src="saveData.agent_code" class="w-bor-25" style="width: 600rpx;height: 600rpx;"></image>

        <button type="button" class="van-share-sheet__cancel" @click="closeQRcodeSave()">取消</button>
      </view>
    </uni-popup>

    <!-- 普通弹窗 -->
    <uni-popup ref="noticePopup"   borderRadius="20px 20px 20px 20px">
      <view class="popup-content">
        <view style="text-align: center;font-size: 16px;margin-top: 10px;font-weight: 600;">系统消息</view>
        <view
            class="text" style="margin:10px 0;width: 80vw">{{this.wallteData.reason}}</view>
        <view class="popup-btn">
          <button class="popup-btn" size="mini" @click="submitConfirm()">确定</button>
        </view>
      </view>
    </uni-popup>


  </view>
</template>

<script>
import groupIcon1 from '@/static/gane/mine-group-icon1.png'
import groupIcon2 from '@/static/gane/mine-group-icon2.png'
import groupIcon3 from '@/static/gane/mine-group-icon3.png'
import groupIcon4 from '@/static/gane/mine-group-icon4.png'
import itemIcon1 from '@/static/mine/mine-item-icon1.png'
import itemIcon2 from '@/static/mine/mine-item-icon2.png'
import itemIcon3 from '@/static/mine/mine-item-icon3.png'
import itemIcon4 from '@/static/mine/mine-item-icon4.png'

import $H from '@/pages/common/request.js'
import $C from '@/pages/common/config.js';
export default {
  data() {
    return {
      welfareList: [{
        title: '晋级礼金',
        active: true
      },
        {
          title: '每周红包',
          active: false
        },
        {
          title: '高额保单',
          active: false
        },
        {
          title: '高收益率',
          active: false
        }
      ],
      groupList: [{
        title: '好友推荐',
        img: groupIcon1,
        label: '推荐送礼金'
      },
        // {
        // 	title: '合营计划',
        // 	img: groupIcon2,
        // 	label: '加入我们，共赢财富'
        // },
        // {
        // 	title: '下载app',
        // 	img: groupIcon3,
        // 	label: '更多精彩娱乐'
        // },
        {
          title: '退出登录',
          img: groupIcon4,
          label: ''
        },
      ],
      itemList: [{
        title: '余额明细',
        icon: itemIcon2
      },
        {
          title: '取款记录',
          icon: itemIcon3
        },
        {
          title: '投注记录',
          icon: itemIcon4
        },
      ],
      userInfo: null,
      nickname: null,
      date: '今日',
      saveData: {},
      banlanceBaoInfo:{
        balance:'0.00',//总余额
        balance_income:'0.00',//总收益
        y_income:'0.00',//昨日收益
        earning_rate:'0.00',//当前收益率
      },
    }
  },

  methods: {
    submitConfirm(){
      $H.post('/app_user_save_wallet_status',{id:this.wallteData.reason_id}).then((res) => {

      })
      this.$refs.noticePopup.close();
    },
    getWalletData() {
      $H.post('/app_user_wallet_data').then((res) => {
        console.log(res)
        if (res.code == 200) {
          this.wallteData = res.data
          if(this.wallteData?.reason){
            this.$refs.noticePopup.open('center')
          }
        } else {
          return uni.showToast({
            title: res.msg,
            duration: 1000,
            icon: 'none'
          });
        }
      })
    },
    getBanlanceBao() {
      $H.post('/banlance_bao_info').then((res) => {

        if (res.code == 200) {
          this.banlanceBaoInfo = res.data.balanceBao
          this.vipInfo = res.data.vip
          this.moneyMsg = "最多可转出¥"+this.banlanceBaoInfo?.money;
        }
      })
    },
    getUserInfo() {
      $H.post('/app_user_get_userinfo').then((res) => {
        if (res.code == 200) {
          this.userInfo = res.data

          uni.setStorageSync('UserInfo', res.data)
        }
      })
    },
    // getInfo(){
    // 	this.userInfo = uni.getStorageSync('UserInfo')
    // },
    toList(index) {
      switch (index) {
        case 0:
          uni.navigateTo({
            url: '/pages/my/order/money_log'
          });

          break;
        case 1:
          uni.navigateTo({
            url: '/pages/my/wallet/take_money_log'
          });

          break;
        case 2:
          uni.navigateTo({
            url: '/pages/my/order/order'
          });
          break;
      }

    },

    selGroup(item) {
      switch (item.title) {
        case '好友推荐':
          uni.navigateTo({
            url: '/pages/my/agent/agent'
          });
          //this.$refs.save_popup.open()
          break;
        case '合营计划':
          this.toTips()
          break;
        case '下载app':
          this.toTips()
          break;
        case '退出登录':
          uni.showToast({
            title: '退出成功',
            icon: 'none'
          });
          uni.removeStorageSync('UserInfo')
          setTimeout(() => {
            uni.navigateTo({
              url: '/pages/login/login'
            });
          }, 1500)
          break;
      }

    },

    closeSave() {
      this.$refs.save_popup.close()
    },

    getSaveData() {
      $H.post('/app_user_agent', {
        domain: window.location.origin,
        date: this.date
      }).then((res) => {
        if (res.code == 200) {
          this.saveData = res.data

        } else {
          return uni.showToast({
            title: res.msg,
            duration: 1000,
            icon: 'none'
          });
        }
      })
    },

    selSaveItem(type) {
      if (type == 'link') {
        this.copys(this.saveData.agent_url)
      } else {

        this.$refs.qrcode_popup.open()
      }
      this.$refs.save_popup.close()
    },

    closeQRcodeSave() {
      this.$refs.qrcode_popup.close()
    },

    copys(data) {
      let url = data;
      let oInput = document.createElement('input');
      oInput.value = url;
      document.body.appendChild(oInput);
      oInput.select(); // 选择对象;
      document.execCommand("Copy"); // 执行浏览器复制命令
      // 复制成功提示;
      uni.showToast({
        title: '复制成功',
        icon: 'none',
      });
      oInput.remove()
    },

    toTips(type) {

      uni.showToast({
        title: '暂未开放',
        icon: 'none'
      });
      return;

      if(type==1){
        uni.navigateTo({
          url: '/pages/my/yuEBao/index'
        });
      }

      else if(type==3){
        uni.navigateTo({
          url: '/pages/my/yuEBao/memberList'
        });
      }else{
        uni.showToast({
          title: '即将开放',
          icon: 'none'
        });
        return;
      }

    },

    toLogin() {
      uni.navigateTo({
        url: '/pages/login/login'
      });
    },
    edit_nickname() {
      this.nickname = this.userInfo.nickname
      this.$refs.phone_popup.open('center')
    },
    edit_nickname_submit() {
      $H.post('/app_user_securemsg', {
        type: 'edit_nickname',
        nickname: this.nickname,
        code: '1111',
      }).then((res) => {
        if (res.code == 200) {
          this.$refs.phone_popup.close()
          this.getUserInfo()
          uni.showToast({
            title: res.msg,
            duration: 1000,
            icon: 'none'
          });
        } else {
          return uni.showToast({
            title: res.msg,
            duration: 1000,
            icon: 'none'
          });
        }

      })
    },
    choose_image(sourceType = 'album') {
      uni.chooseImage({
        count: 9,
        sizeType: ['compressed'],
        success: (res) => {
          console.log(res)
          uni.showLoading({})
          res.tempFilePaths.map((item, index) => {
            uni.uploadFile({
              url: $C.baseUrl + '/admin_image_upload?name=face',
              // url: this.HTTP_URL +'/admin/api.upload/state',

              filePath: item,
              name: 'image',
              header: {
                'token': this.userInfo.token
              },
              success: (uploadRes) => {
                uni.hideLoading()
                uploadRes = JSON.parse(uploadRes.data);
                console.log(uploadRes)
                if (uploadRes.code !== 200) {
                  uni.showToast({
                    title: uploadRes.msg || '上传错误',
                    duration: 1000,
                    icon: 'none'
                  });
                  return
                }

                $H.post('/app_user_securemsg', {
                  type: 'edit_avatar',
                  avatar: uploadRes.data.imgurl,
                  code: '1111',
                }).then((res) => {
                  if (res.code == 200) {
                    this.getUserInfo()
                    uni.showToast({
                      title: res.msg,
                      duration: 1000,
                      icon: 'none'
                    });
                  } else {
                    return uni.showToast({
                      title: res.msg,
                      duration: 1000,
                      icon: 'none'
                    });
                  }

                })
              },
              fail: (err) => {
                alert(JSON.stringify(err))
                uni.hideLoading()
              }
            });
          })
        }
      });
    },
  },

  onShow() {
    this.userInfo = uni.getStorageSync('UserInfo');
    this.getSaveData()
    this.getBanlanceBao()
    this.getWalletData()
    if (this.userInfo.uid && this.userInfo.token) {
      this.getUserInfo()
    } else {
      return uni.navigateTo({
        url: '/pages/login/login'
      });
    }
  }
}
</script>

<style scoped lang="scss">
body {
  background-color: #f2f2ff !important;
  color: #535d76;
  line-height: 1.6;
}

uni-page-body {
  background-color: transparent;
}

.w-bj-cont {
  background-color: #f2f2ff !important;
}

.w-row-center {
  color: #333 !important;
}

.cent-box {

  height: calc(100% - 26.93333vw);
  position: fixed;
  top: 12.8vw;
  left: 0px;
  right: 0px;
  bottom: 14.13333vw;
  overflow-x: hidden;
  overflow-y: auto;
  z-index: 1;
  padding-bottom: 3.2vw;

  .head-padding {
    padding: 0 30rpx;
  }

  .head-box {
    .avatar {
      background: transparent !important;
    }

    .cent {
      width: 0;
      flex: 1;
      margin-left: 20rpx;

      .title {
        font-size: 4.8vw;
        color: #45608b;
        font-weight: 500;
      }

      .label {
        font-size: 2.66667vw;
        color: #45608b;
        font-weight: 500;
      }

      .vip-tag {
        background-repeat: no-repeat;
        background-size: auto 100%;
        display: inline-block;
      }

      .small {
        width: 11.46667vw;
        height: 4.26667vw;
        transform: translateY(0.8vw);
      }
    }

    .head-icon {
      transform: rotatey(180deg);
    }


  }

  .price-box {
    border-radius: 10rpx 10rpx 0rpx 0rpx;
    height: 40rpx;

    .van-space-item {
      .icon {
        width: 50rpx;
        height: 50rpx !important;
        margin-right: 20rpx;
      }
    }
  }

  .mine-tool {
    width: 100%;
    border-radius: 2.66667vw;
    box-shadow: 0 .04rem .26rem #6d7ae84d;
    border-image-source: linear-gradient(314.7deg, #fff 2.25%, #fff 98.51%);
    background-image: url('@/static/gane/mine-tool.png');
    background-repeat: no-repeat;

    .icon {
      width: 10.66667vw;
    }

    .van-grid-item__content--center {
      display: flex;
      flex-direction: column;
      box-sizing: border-box;
      height: 100%;
      padding: 4.26667vw 2.13333vw;
      // background-color: #fff;
    }
  }

  .cover {
    background-position: center center;
    background-repeat: no-repeat;
    -webkit-background-size: cover;
    background-size: cover;
  }

  .cover-tw {
    background-repeat: no-repeat;
    -webkit-background-size: 100% auto;
    background-size: 100% auto;
  }

  .mine-cell {
    margin-top: -9.33333vw;
    z-index: 1;
    background-image: url('@/static/gane/mine-bg.png');
    background-repeat: no-repeat;
    // position: absolute;
    // left: 0;

    .van-grid-item__content {
      display: flex;
      flex-direction: column;
      box-sizing: border-box;
      height: 100%;
      padding: 4.26667vw 2.13333vw;
      // background: #fff;

      .van-badge__wrapper {
        position: relative;
        display: inline-block;
      }

      .item-icon {
        display: inline-block;
        width: 9.6vw;
        height: 9.6vw;
        text-align: center;
        background-color: #f4f7ff;
        box-shadow: 0 1.33333vw 1.33333vw #6d7ae84d;

        .icon {
          width: 32rpx;
        }
      }
    }

    .van-grid-item__content--square {
      position: absolute;
      top: 0;
      right: 0;
      left: 0;
    }

    .item-icon-child {
      box-shadow: inset 0 -.53333vw 1.33333vw #6d7ae84d;
      width: 9.6vw;
      height: 9.6vw;
      text-align: center;
      background-color: #f4f7ff;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;

      .icon {
        width: 32rpx;
      }
    }
  }

  .vip-progress-bar {
    display: flex;
    flex-flow: row nowrap;
    justify-content: center;
    align-items: center;



    .vip-progress-box {
      position: relative;
      flex: 1 1;
      height: 3.2vw;
      margin: 0 2.13333vw;
      border-radius: 13.33333vw;
      overflow: hidden;
      transform: translateY(1px);

      .vip-progress-line {
        position: relative;
        width: 100%;
        height: 100%;
        background: #dbdcdd;

        .vip-progress-rate {
          position: absolute;
          top: 0;
          left: 0;
          width: 0;
          height: 100%;
          background-image: url('../../static/gane/vip-progress-rate.png');
          background-size: auto 100%;
          border-radius: 13.33333vw;
          animation: scrollBg 5s linear infinite;
        }
        .vip-progress-rate1 {
          position: absolute;
          top: 7px;
          left: 0;
          width: 0;
          height: 100%;
          background-image: url('@/static/gane/vip-progress-rate1.png');
          background-size: auto 100%;
          border-radius: 13.33333vw;
          animation: scrollBg 5s linear infinite;
        }
      }


    }


  }

  .qy {
    display: flex;
    align-items: center;

    .icon {
      transform: rotateY(180deg);
      width: 20rpx;
      margin-left: 6rpx;
    }
  }

  .vip-welfare {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;

    .item {
      display: flex;
      align-items: center;
      border-radius: 13.33333vw;
      background-color: #f3faff;
      padding-right: 1.33333vw;
      height: 4.8vw;
      color: #c9cddb;
      font-weight: 500;
      font-size: 3.2vw;
      line-height: 5.33333vw;
      position: relative;

      &:before {
        content: "";
        display: inline-block;
        width: 4.8vw;
        height: 4.8vw;
        margin-right: .8vw;
        background-repeat: no-repeat;
        background-size: cover;
        background-image: url('../../static/gane/mine-icon-n.png');
      }
    }

    .active {
      color: #7981a4;

      &:before {
        background-image: url('../../static/gane/mine-icon-y.png');
      }
    }
  }

  .van-cell-group {
    background-color: #fff;
    box-shadow: 0 1px .8vw #0000000d;

    .van-cell {
      padding-top: 4vw;
      padding-bottom: 4vw;
      position: relative;
      display: flex;
      box-sizing: border-box;
      width: 100%;
      padding: 2.66667vw 4.26667vw;
      overflow: hidden;
      color: #323233;
      font-size: 3.73333vw;
      line-height: 6.4vw;
      align-items: center;

      .icon {
        width: 32rpx;
        margin-right: 2.13333vw;
      }

      .van-cell__title {
        flex: 1;
      }

      .van-cell__value {
        position: relative;
        overflow: hidden;
        color: #969799;
        text-align: right;
        vertical-align: middle;
        word-wrap: break-word;
        font-size: 3.46667vw;
      }
    }
  }


}

.saveBox {
  width: 100%;
  border-radius: 20rpx 20rpx 0 0;
  margin: auto;

  .save-items {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 40rpx;

    &>image {
      width: 70rpx;
      margin-bottom: 20rpx;
    }
  }
}
</style>